<script setup lang="ts">
import { URL_CONFIGS } from '@/constants'
import http from '@/utils/http'
import { usePrintStore } from '@/stores'

const panelPosition = { bottom: 4, height: 27, width: 400, right: 5 }
const printStore = usePrintStore()
const legendItems = ref<{ name: string; picAsUrl: string }[]>([])

onMounted(async () => {
  try {
    const layersLegendInfo = await http.get<any>(URL_CONFIGS.DY_MAP_LEGEND_URL)
    const labelMap = new Map()
    layersLegendInfo.layerLegends[11].subLayerLegends.forEach((subLayerLegend: any) => {
      const legend = subLayerLegend.legends[0]
      if (!legend.url.includes('static')) {
        let label = legend.label.split('@')[0]
        if (!labelMap.has(label)) {
          labelMap.set(label, legend.url)
          legendItems.value.push({ name: label.replace(/\d+$/, ''), picAsUrl: legend.url })
        }
      }
    })
    legendItems.value[2].name = '客运站'
    legendItems.value[5].name = 'T1032'
    printStore.addLegendInfo(legendItems.value)
  } catch (error) {
    throw new Error('获取图例信息失败')
  }
})
</script>

<template>
  <WidgetPanel :title="'图例'" :position="panelPosition">
    <div class="map-legend-container">
      <ul class="map-legend">
        <li v-for="item in legendItems" :key="item.name">
          <el-avatar :size="20" shape="square" :src="item.picAsUrl" />
          <label>{{ item.name }}</label>
        </li>
      </ul>
    </div>
  </WidgetPanel>
</template>

<style lang="scss" scoped>
.map-legend-container {
  height: 20vh;
}
.map-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: left;
  text-align: center;

  li {
    color: #ccc;
    font-size: 10px;
    margin: 5px;
    flex: 0 1 25px;
  }
}
</style>
